<!-- eslint-disable vue/valid-v-for -->
<template>
  <div class="tp-box">
    <a-drawer
      :visible="vvvvprops.vvvvisible"
      :width="vvvvprops.width"
      :closable="vvvvprops.vclosable"
      :destroyOnClose="vvvvprops.vdestroyOnClose"
      @close="handleVillageDetailClose"
    >
      <template #title>
        <div class="title-detail">
          <Tooltip placement="top">
            <h3>{{ getTitle }}</h3>
          </Tooltip>
        </div>
      </template>
      <!-- :scroll="{ x: 1500, y: 600 }" -->
      <Row ref="mapviewRef">
        <Col :span="24">
          <div class="card-container">
            <a-tabs v-model:activeKey="activeKey" type="card">
              <a-tab-pane key="1" tab="房屋基本信息3">
                <PageWrapper>
                  <Description @register="getfwinfo" class="mt-4" :labelStyle="{ width: '15em' }" />
                </PageWrapper>
              </a-tab-pane>
              <a-tab-pane key="2" tab="隐患信息">
                <PageWrapper>
                  <Description @register="getyhinfo" class="mt-4" :labelStyle="{ width: '15em' }" />
                </PageWrapper>
              </a-tab-pane>
              <a-tab-pane key="3" tab="整改信息" v-model="zgvis">
                <a-descriptions v-for="item in rectification" :key="item" title="" bordered>
                  <a-descriptions-item label="隐患类型" :span="3">
                    {{ item.check_name }}
                  </a-descriptions-item>
                  <a-descriptions-item label="整改时间" :span="3">
                    {{ item.zg_time }}
                  </a-descriptions-item>
                  <a-descriptions-item label="整改人" :span="3">
                    {{ item.zg_name }}
                  </a-descriptions-item>
                  <a-descriptions-item
                    label="照片"
                    :span="3"
                    v-for="(pic, index) in imageList"
                    :key="index"
                  >
                    <a-image
                      :src="require('' + pic[index] + '')"
                      style="width: 200px"
                      @click="visible = true"
                    />
                    <div style="display: none">
                      <a-image-preview-group
                        :preview="{ visible, onVisibleChange: (vis) => (visible = vis) }"
                      >
                        <a-image :src="require('' + getAvatarView(pic) + '')" /> />
                      </a-image-preview-group>
                    </div>
                  </a-descriptions-item>
                </a-descriptions>
              </a-tab-pane>
            </a-tabs>
          </div>
        </Col>
      </Row>
    </a-drawer>
  </div>
</template>
<script setup lang="ts">
  import { Tooltip } from 'ant-design-vue';
  import { Row, Col } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  import { ref, computed, onMounted } from 'vue';
  import { Description, useDescription } from '/@/components/Description/index';
  import { getYhDetailColumns, getFwDetailColumns } from '/@/views/danger/fire/tableData';
  import { housrDetailApi } from '/@/api/demo/table';
import { func } from 'vue-types';
  const visible = ref(false);
  const zgvis=ref(false);
  const img_src = ref('');
  // 默认传过来的值q
  const vvvvprops = defineProps({
    vvvvisible: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: '',
    },
    width: {
      type: Number,
      default: 256,
    },
    vclosable: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Array,
      default: () => [],
    },
    vdetailParams: {
      type: Object,
      default: () => {},
    },
    vvvvcurrentXzqdmname: {
      type: String,
      default: '',
    },
    vvvvcurrentTitle: {
      type: Object,
      default: () => {},
    },
    wscolsList: {
      type: Array,
      default: () => [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
    },
    vdestroyOnClose: {
      type: Boolean,
      default: true,
    },
    onClose: {
      type: Function as PropType<() => void>,
      default: () => {},
    },
    pid: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: '',
    },
    hid: {
      type: String,
      default: '',
    },
    chk: {
      type: Boolean,
      default: true,
    },
    id: {
      type: String,
      default: '',
    },
  });
  const houseInfo = ref<Recordable>({});
  const rectification = ref<Recordable>({});
  let imageList = ref({});
  const activeKey = ref('1');
  const vvvvisible = ref(true);
  const getTitle = computed(() => {
    let str = `${vvvvprops.vvvvcurrentTitle.title}1的自查情况`;
    if (str.length > 50) {
      str = str.substring(0, 50) + '...';
    }
    getDataInfo(vvvvprops.vvvvcurrentTitle.id);
    return str;
  });
  const getDataInfo = async (id) => {
    housrDetailApi({ id: id })
      .then((d) => {
        houseInfo.value = d.buildingPcYhLogDetailDtoList[0];
        rectification.value = d.rectificationYhList;
        if (rectification.value != null) {
          zgvis.value = true;
          getImgList();
        } else {
          zgvis.value = false;
        }
      })
      .catch(() => {
        //error(err.message || '获取房屋信息失败');
      });
  };

  const getImgList = () => {
    let imgs = rectification.value[0];
    imageList = JSON.parse(imgs.zg_zp);
    console.log(imageList);
  }

  const [getfwinfo] = useDescription({
    title: '',
    data: houseInfo,
    schema: getFwDetailColumns(vvvvprops.chk),
    column: 2,
    collapseOptions: { canExpand: true, helpMessage: vvvvprops.vvvvcurrentTitle.id },
  });

  const [getyhinfo] = useDescription({
    title: '',
    data: houseInfo,
    schema: getYhDetailColumns(vvvvprops.chk),
    column: 1,
    collapseOptions: { canExpand: true, helpMessage: vvvvprops.vvvvcurrentTitle.id },
  });
  function getAvatarView(pic) {
    console.log(pic);
    return pic;
  }

  //  调用 父组件传过来的方法
  const emit = defineEmits(['close']);
  const handleVillageDetailClose = () => {
    vvvvisible.value = false;
    emit('close');
    console.log('************8vvisible*************', vvvvisible.value);
  };
  onMounted(() => {
    console.log('*******初始化*****3', vvvvprops.vvvvcurrentTitle.id);
  });
</script>
<style lang="less" scoped>
  .tp-box {
    height: 100%;
  }
  .title-detail {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .pagination {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
  }
</style>
